<template>
	<view class="u-page">
		<view class="check_reply">查看回复</view>
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				<view class="album">
					<view class="album__avatar"  @click="gotoChat(receivedData.userId, receivedData.nickname)">
						<image :src="receivedData.avatar" mode="" style="width: 32px;height: 32px;"></image>
					</view>
					<view class="album__content">
						<u--text :text="receivedData.nickname" type="primary" bold size="17"></u--text>
						<view class="time">{{receivedData.createTime}}</view>
						<u--text margin="0 0 8px 0" :text="receivedData.commentContent"></u--text>
						<u-album previewFullImage :urls="receivedData.picture" keyName="src2"></u-album>
					</view>
				</view>
				<view v-if="userId == receivedData.userId" class="delete">
					<u-button plain='true' size="mini" text="删除" type="warning"
						@click="deleted(receivedData)"></u-button>
				</view>
				<view>
					<image @click="replyOne(receivedData)" class="huifu" src="../../static/huifu.png"></image>
					<view @click="replyOne(receivedData)" class="reply">回复</view>
				</view>
			</view>
		</view>
		<view class="divider"></view>
		<view class="all_reply">全部回复</view>
		<u-divider>大漠孤烟直</u-divider>
		<view class="u-page">
			<view class="u-demo-block" v-for="(item, index) in list" :key="index">
				<view class="u-demo-block__content">
					<view class="album">
						<view class="album__avatar" @click="gotoChat(item.userId, item.nickname)">
							<image :src="item.avatar" mode="" style="width: 32px;height: 32px;"></image>
						</view>
						<view class="album__content">
							<u--text :text="item.nickname" type="primary" bold size="17"></u--text>
							<view class="time">{{item.createTime}}</view>
							<u--text class="text" :text="item.commentContent"></u--text>
							<u-album previewFullImage :urls="item.picture" keyName="src2"></u-album>
						</view>
					</view>
				</view>
				<view class="expand" v-if="item.rootComment" @click="expand(item)">查看更多回复></view>
				<view v-if="userId == item.userId" class="delete">
					<u-button plain='true' size="mini" text="删除" type="warning" @click="deleted(item)"></u-button>
				</view>
				<view>
					<image @click="reply(item)" class="huifu" src="../../static/huifu.png"></image>
					<view @click="reply(item)" class="reply">回复</view>
				</view>
				<u-divider>大漠孤烟直</u-divider>
			</view>
		</view>
		<view class="input" style="background-color: white;">
			<view class="sendComment">
				<u-button @click="sendComment(item)" v-if="inputValue != ''" type="primary" text="发送"></u-button>
				<u-button v-if="inputValue == ''" type="primary" disabled="true" text="发送"></u-button>
			</view>
			<view class="upload" @click="upload">
				<u-icon name="plus-circle" color="#2979ff" size="30"></u-icon>
			</view>
			<view class="input-item">
				<u-textarea showConfirmBar v-model="inputValue" :placeholder="replyName" autoHeight></u-textarea>
			</view>
			<view v-if="isUploading" class="isUploading">
				<view>
					<view class="addbox1_son2">
						<view class="pic-box">
							<view class="pic-box-son" v-for="(picitem,picindex) in picArr" :key="picindex">
								<!-- 删除按钮 -->
								<view class="delbtn" @tap="delpic(picindex)"></view>
								<image :src="picitem"></image>
							</view>
							<view v-show="picArr.length<5" class="pic-box-son" @tap="sendImg">
								<view>点击<br>上传图片</view>
								<view>（最多5张）</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				replyUserId: '',
				picture: [],
				userId: '',
				nickname: '',
				commentId: '',
				shopId: '',
				replyId: '',
				picArr: [],
				isUploading: false,
				replyName: '',
				text: '点击评论',
				isInputting: false,
				inputValue: '',
				albumWidth: 0,
				receivedData: {},
				list: [],
				urls1: [{
					src2: 'https://cdn.uviewui.com/uview/album/1.jpg',
				}]
			}
		},
		onLoad(options) {
			this.userId = uni.getStorageSync('userId');
			console.log("options11111", decodeURIComponent(options.item))
			this.receivedData = JSON.parse(decodeURIComponent(options.item));
			this.list = this.receivedData.rootComment;
			this.shopId = this.receivedData.shopId;
			this.commentId = this.receivedData.id;
			this.nickname = this.receivedData.nickname;
		},
		methods: {
			gotoChat(id, nickname){
				uni.navigateTo({
					url:'/pages/private_chat/private_chat?receiverId=' + id + "&nickname=" + nickname
				})
			},
			deleted(item) {
				let that = this;
				let data = {
					commentId: item.id
				}
				uni.showModal({
					title: '提示',
					content: '确认删除该评论？',
					showCancel: true, // 是否显示取消按钮
					confirmText: '确定', // 确定按钮的文本
					success: (res) => {
						if (res.confirm) {

							console.log('用户点击了确定按钮', data);
							that.$ajax(that.$url.deleteMyComment, "POST", data, function(resp) {
								uni.showToast({
									icon: 'none',
									title: '删除成功！'
								})
								uni.navigateTo({
									url: '/pages/shop_content/shop_content'
								})
							});
						} else if (res.cancel) {
							console.log('用户点击了取消按钮');
						}
					},
					fail: (error) => {
						console.error('显示弹窗失败', error);
					}
				});
			},
			sendComment(item) {
				let that = this;
				let data = {
					commentContent: that.inputValue,
					shopId: that.shopId,
					picture: that.picture.join(",")
				}
				if (that.replyName != '') {
					data = {
						commentContent: that.inputValue,
						shopId: that.shopId,
						parentId: that.replyId,
						picture: that.picture.join(",")
					}
				}
				console.log("data", data)
				that.$ajax(that.$url.addComment, "POST", data, function(resp) {
					uni.showToast({
						icon: 'none',
						title: '评论成功'
					})
					console.log("1111111111111111111111111", that.replyUserId)
					if (that.replyUserId != '') {
						console.log("2222222222222222222222222222", that.replyUserId)
						that.sendMessage();
					}
					uni.navigateBack();
				})
			},
			sendMessage() {
				let that = this;
				let data = {
					receiverId: that.replyUserId,
					content: that.inputValue,
					sendTime: Date.now(),
					nickname: uni.getStorageSync("nickname"),
					senderId: uni.getStorageSync("userId"),
					avatar: uni.getStorageSync("avatar"),
					locationId: that.replyId,
					locationName: 'shop',
					className: '评论'
				}
				console.log("messageData", data)
				that.$ajax(that.$url.sendMessage, "POST", data, function(resp) {

				})
			},
			// 上传图片
			sendImg: function() {
				let that = this;
				let num = 5 - this.picArr.length;
				let count = num; // 自定义一次性最多可选几张
				uni.chooseImage({
					count: count, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						const filePaths = res.tempFilePaths;
						let selected = this.picArr
						for (let i = 0; i < filePaths.length; i++) {
							that.picture[i] = "http://s1qq2mel1.hn-bkt.clouddn.com/images/" + that.userId +
								"/shopComment/" + filePaths[i];
							that.$ajax(that.$url.upLoad, "GET", null, function(resp) {
								let token = resp.data.result;
								let now = new Date();
								console.log("filePaths", filePaths[i])
								that.imgUrl = 'images/' + that.userId + "/shopComment/" +
									filePaths[i]; // 图片链接，其中的 / 会自动生成一个名为images的文件夹， // 则是两个
								let self = this
								wx.uploadFile({
									filePath: filePaths[i], // ctx.takePhoto拍照获取的图片链接
									url: "https://upload-z2.qiniup.com", // 七牛云地址
									name: "file",
									formData: {
										token,
										key: that.imgUrl,
										insertOnly: 0,
									},
									success: (a) => {
										console.log(a)
										console.log("上传成功！")
										let res = a.data
										res = JSON.parse(res)
										if (res.code == '1') {
											const {
												data
											} = res
											self.avatar = data.url
											self.cdnUrl = getApp().globalData.cdnUrl +
												data.url
										}

										wx.hideLoading()
										wx.showToast({
											title: '上传成功',
											icon: 'success',
											duration: 3000
										})
									},
									fail: (res) => {
										console.log(res)
										return 0;
									},
								})

							})

							this.picArr.unshift(filePaths[i])
						}
						console.log(this.picArr)
					}
				});
			},
			// 删除当前图片
			delpic: function(index) {
				// console.log(index)
				this.picArr.splice(index, 1)
			},
			upload() {
				let that = this;
				if (that.isUploading == false) {
					that.isUploading = true;
				} else {
					that.isUploading = false;
				}

			},
			reply(item) {
				console.log("点击回复", item.id, item.nickname, this.receivedData.shopId)
				this.shopId = this.receivedData.shopId;
				this.replyId = item.id;

				this.isInputting = true
				this.text = '点赞收藏'
				if (this.replyName == '') {
					this.replyName = "回复：" + item.nickname;
					this.replyUserId = item.userId;
				} else {
					this.replyName = '';
					this.replyUserId = '';
				}

			},
			replyOne(item) {
				console.log("点击回复", this.receivedData.id, this.receivedData.nickname, this.receivedData.shopId)
				this.shopId = this.receivedData.shopId;
				this.replyId = this.receivedData.id;
				this.isInputting = true
				this.text = '点赞收藏'
				if (this.replyName == '') {
					this.replyName = "回复：" + this.receivedData.nickname;
					this.replyUserId = this.receivedData.userId;
				} else {
					this.replyName = '';
					this.replyUserId = '';
				}

			},
		}
	}
</script>

<style lang="scss">
	.delete {
		position: absolute;
		padding-top: 45rpx;
		padding-left: 420rpx;
	}

	.u-page {
		padding-bottom: 110rpx;
	}

	.addbox1_son2 {
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		/* flex-direction: row; */
		/* align-items: center; */
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, .1);
	}

	.pic-box {
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		/* justify-content: center; */
	}

	.pic-box-son {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
		width: 152rpx;
		height: 152rpx;
		padding: 4rpx;
		border-radius: 6rpx;
		border: 2rpx dashed rgba(0, 0, 0, .2);
	}

	.pic-box-son image {
		width: 100%;
		height: 100%;
		border-radius: 6rpx;
	}

	.pic-box-son>view:first-child {
		font-size: 28rpx;
		color: #565656;
		text-align: center;
	}

	.pic-box-son>view:last-child {
		font-size: 24rpx;
		color: #a7a7a7;
		text-align: center;
	}

	.delbtn {
		width: 100%;
		position: relative;
		text-align: center;
		line-height: 32rpx;
		font-size: 46rpx;
	}

	.delbtn::before {
		position: absolute;
		content: '-';
		background-color: #ff9000;
		color: #fff;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50rpx;
		top: 6rpx;
		right: 6rpx;
		z-index: 99;
	}

	.isUploading {
		padding-left: 40rpx;
	}

	.sendComment {
		position: absolute;
		padding-left: 640rpx;
		padding-top: 20rpx;
	}

	.switchInput {
		position: absolute;
		padding-left: 560rpx;
		padding-bottom: 10rpx;
	}

	.upload {
		position: absolute;
		margin-left: 560rpx;
		margin-top: 30rpx;
	}

	.input-item {
		width: 70%;
		margin-left: 10rpx;
		margin-bottom: 70rpx;
		margin-top: 20rpx;
	}

	.input {
		box-shadow: 0px -1px 10px rgba(0, 0, 0, 0.1);
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.reply {
		margin-left: 628rpx;
		margin-top: 45rpx;
		color: #AAAAAA;
		font-size: 28rpx;
	}

	.huifu {
		width: 70rpx;
		height: 43rpx;
		position: absolute;
		margin-left: 550rpx;
	}


	.time {
		margin-top: 10rpx;
		margin-bottom: 30rpx;
		font-size: 28rpx;
		color: #AAABBB;
	}

	.text {
		white-space: normal;
		margin-top: 20rpx;
	}

	.all_reply {
		font-size: 34rpx;
		font-weight: bold;
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	/* 分割线样式 */
	.divider {
		margin-top: 50rpx;
		height: 10px;
		/* 设置分割线高度 */
		background-color: #eeeeee;
		/* 设置分割线颜色为灰色 */
	}

	.check_reply {
		font-size: 34rpx;
		font-weight: bold;
		margin-left: 300rpx;
		margin-top: 10rpx;
	}

	.u-demo-block__content {
		margin-top: 48rpx;
		margin-left: 20rpx;
	}

	.album {
		@include flex;
		align-items: flex-start;

		&__avatar {
			background-color: $u-bg-color;
			padding: 5px;
			border-radius: 3px;
		}

		&__content {
			margin-left: 10px;
			flex: 1;
		}
	}
</style>